<template>
  <div style="background: #fff">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="faceAdvert" tab="刷脸设备">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <jeepay-text-up v-model:value="vdata.searchData['mchNo']" :placeholder="'商户号'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- 列表渲染 -->
            <JeepayTable
              ref="infoTableFace"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsFace"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div>
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'advertType'">
                  {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':record.advertType === 4?$SYS_NAME_MAP.AGENT_APP+'APP':record.advertType === 5?'商户登录页':'代理商登录页' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'mchNo'">
                  <div v-if="record.mchNo">
                    商户号: {{ record.mchNo }} <br> 商户名：{{ record.infoName }}
                  </div>
                  <div v-else>全部商户</div>
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
            <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
          </page-header-wrapper>
        </div>
      </a-tab-pane>

      <a-tab-pane key="afterAdvert" tab="支付后">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- 列表渲染 -->
            <JeepayTable
              ref="infoTableAfter"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsAfter"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div>
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'appPlace'">
                  {{ record.appPlace == 4?'点金计划广告':'小程序广告' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </page-header-wrapper>
        </div>
      </a-tab-pane>

      <a-tab-pane key="appMchAdvert" :tab="$SYS_NAME_MAP.MCH_APP + 'APP'">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {appPlace: '2'};vdata.paramsAndRateTabVal = 'home' }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item v-if="vdata.searchData['appPlace'] != 1" label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['appPlaceType']" placeholder="APP广告类型">
                  <a-select-option :value="1">
                    卡片广告
                  </a-select-option>
                  <a-select-option :value="2">
                    轮播广告
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- tab 选择框部分 start -->
       
            <!-- 列表渲染 -->
            <JeepayTable
              v-if="vdata.isShowTable"
              ref="infoTableAppMch"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsAppMch"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div class="tab-wrapper">
                  <div class="tab-content">
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'home' }" @click="changeAppAdvertType(2, 'home')">首页</div>
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'start' }" @click="changeAppAdvertType(1, 'start')">启动页</div>
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'myPage' }" @click="changeAppAdvertType(3, 'myPage')">我的页</div>
                  </div>
                </div>
                <div class="but-wrapper">
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'advertType'">
                  {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':record.advertType === 4?$SYS_NAME_MAP.AGENT_APP+'APP':record.advertType === 5?'商户登录页':'代理商登录页' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'appPlaceType'">
                  {{ record.appPlaceType === 1?'卡片广告':'轮播广告' }}
                </template>
                <template v-if="column.key === 'appPlace'">
                  {{ record.appPlace === 1?'启动页':record.appPlace === 2?'首页':'我的页' }}
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </page-header-wrapper>
        </div>
      </a-tab-pane>

      <a-tab-pane v-if="$hasAgentEnt()" key="appAgentAdvert" :tab="$SYS_NAME_MAP.AGENT_APP+'APP'">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {appPlace: '2'};vdata.paramsAndRateTabVal = 'home' }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item v-if="vdata.searchData['appPlace'] != 1" label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['appPlaceType']" placeholder="APP广告类型">
                  <a-select-option :value="1">
                    卡片广告
                  </a-select-option>
                  <a-select-option :value="2">
                    轮播广告
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- 列表渲染 -->
            <JeepayTable
              v-if="vdata.isShowTable"
              ref="infoTableAppAgent"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsAppAgent"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div class="tab-wrapper">
                  <div class="tab-content">
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'home' }" @click="changeAppAdvertType(2, 'home')">首页</div>
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'start' }" @click="changeAppAdvertType(1, 'start')">启动页</div>
                    <div class="tab-item" :class="{ 'tab-selected': vdata.paramsAndRateTabVal == 'myPage' }" @click="changeAppAdvertType(3, 'myPage')">我的页</div>
                  </div>
                </div>
                <div>
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'advertType'">
                  {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':record.advertType === 4?$SYS_NAME_MAP.AGENT_APP+'APP':record.advertType === 5?'商户登录页':'代理商登录页' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'appPlaceType'">
                  {{ record.appPlaceType === 1?'卡片广告':'轮播广告' }}
                </template>
                <template v-if="column.key === 'appPlace'">
                  {{ record.appPlace === 1?'启动页':record.appPlace === 2?'首页':'我的页' }}
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </page-header-wrapper>
        </div>
      </a-tab-pane>

      <a-tab-pane key="mchAdvert" tab="商户系统登录页">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- 列表渲染 -->
            <JeepayTable
              ref="infoTableMch"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsWeb"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div>
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'advertType'">
                  {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':record.advertType === 4?$SYS_NAME_MAP.AGENT_APP+'APP':record.advertType === 5?'商户登录页':'代理商登录页' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'appPlaceType'">
                  {{ record.appPlaceType === 1?'卡片广告':'轮播广告' }}
                </template>
                <template v-if="column.key === 'appPlace'">
                  {{ record.appPlace === 1?'启动页':record.appPlace === 2?'首页':'我的页' }}
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </page-header-wrapper>
        </div>
      </a-tab-pane>

      <a-tab-pane v-if="$hasAgentEnt()" key="agentAdvert" tab="代理商系统登录页">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
              <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
              <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
              <a-form-item label="" class="table-search-item">
                <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="0">
                    待发布
                  </a-select-option>
                  <a-select-option value="1">
                    已发布
                  </a-select-option>
                </a-select>
              </a-form-item>
            </JeepaySearchForm>
            <!-- 列表渲染 -->
            <JeepayTable
              ref="infoTableAgent"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsWeb"
              :searchData="vdata.searchData"
              rowKey="advertId"
              :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
              @btnLoadClose="vdata.btnLoading=false"
            >
              <template #topBtnSlot>
                <div>
                  <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                  <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'advertType'">
                  {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':record.advertType === 4?$SYS_NAME_MAP.AGENT_APP+'APP':record.advertType === 5?'商户登录页':'代理商登录页' }}
                </template>
                <template v-if="column.key === 'releaseState'">
                  <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                </template>
                <template v-if="column.key === 'imgUrl'">
                  <a-image
                    :width="60"
                    :src="record.imgUrl"
                  />
                </template>
                <template v-if="column.key === 'appPlaceType'">
                  {{ record.appPlaceType === 1?'卡片广告':'轮播广告' }}
                </template>
                <template v-if="column.key === 'appPlace'">
                  {{ record.appPlace === 1?'启动页':record.appPlace === 2?'首页':'我的页' }}
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertType, record.advertId)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </page-header-wrapper>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!-- 新增 / 修改 页面组件  -->
  <InfoAddOrEdit ref="infoAddOrEdit" :columnsType="vdata.groupKey == 'faceAdvert' ? 0 : 1" :callbackFunc="searchFunc" />
</template>
<script setup lang="ts">
import { API_URL_ADVERT, req, $batchDelAdvert, reqLoad} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue'

const { $infoBox, $access, $hasAgentEnt, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties

  const tableColumnsFace = reactive([
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    // { title: '广告类型', key: 'advertType', dataIndex: 'advertType' },
    { title: '所属代理', key: 'agentNo', dataIndex: 'agentNo' },
    { title: '所属商户', key: 'mchNo', dataIndex: 'mchNo' },
    { title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])
  const tableColumnsAfter = reactive([
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    { title: '广告位置', key: 'appPlace', dataIndex: 'appPlace' },
    { title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])
  const tableColumnsAppMch = reactive([
    // { title: '广告位置', key: 'appPlace', dataIndex: 'appPlace' },
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    { title: 'APP广告类型', key: 'appPlaceType', dataIndex: 'appPlaceType' },
    // { title: '排序', key: 'advertSort', dataIndex: 'advertSort' },
    { title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])
  const tableColumnsAppAgent = reactive([
    // { title: '广告位置', key: 'appPlace', dataIndex: 'appPlace' },
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    { title: 'APP广告类型', key: 'appPlaceType', dataIndex: 'appPlaceType' },
    // { title: '排序', key: 'advertSort', dataIndex: 'advertSort' },
    { title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])
  const tableColumnsWeb = reactive([
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])

  const vdata : any = reactive ({
    btnLoading: false,
    tableColumnsFace: tableColumnsFace,
    tableColumnsAfter: tableColumnsAfter,
    tableColumnsAppMch: tableColumnsAppMch,
    tableColumnsAppAgent: tableColumnsAppAgent,
    tableColumnsWeb: tableColumnsWeb,
    searchData: {},
    allotDeviceIdList: [], // 要划拨的设备ID，划拨类型为 select-勾选划拨 时必填
    groupKey: 'faceAdvert',
    selectRecordIdList: [],
    isShowTable: true
  })

  const infoTableFace = ref()
  const infoTableAfter = ref()
  const infoTableAppMch = ref()
  const infoTableAppAgent = ref()
  const infoTableMch = ref()
  const infoTableAgent = ref()

  const infoAddOrEdit  = ref()

  // 请求table接口数据
  function reqTableDataFunc (params)  {
    return req.list(API_URL_ADVERT, vdata.searchData)
  }

  onMounted(()=>{
    searchFunc()
  })

  function searchFunc() { // 点击【查询】按钮点击事件
    vdata.btnLoading = true // 打开查询按钮的loading
    if (vdata.groupKey == 'faceAdvert') { // 刷脸设备广告
      vdata.searchData.advertType = '1'
      infoTableFace.value.refTable(true)
    }else if(vdata.groupKey == 'afterAdvert') {  // 支付成功后广告
      vdata.searchData.advertType = '2'
      infoTableAfter.value.refTable(true)
    }else if(vdata.groupKey == 'appMchAdvert') { // 商户通广告
      vdata.searchData.advertType = '3'
      infoTableAppMch.value.refTable(true)
    }else if(vdata.groupKey == 'appAgentAdvert') { // 展业宝广告
      vdata.searchData.advertType = '4'
      infoTableAppAgent.value.refTable(true)
    }else if(vdata.groupKey == 'mchAdvert') { // 商户系统广告
      vdata.searchData.advertType = '5'
      infoTableMch.value.refTable(true)
    }else if(vdata.groupKey == 'agentAdvert') { // 商户系统广告
      vdata.searchData.advertType = '6'
      infoTableAgent.value.refTable(true)
    }
  }

  function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show(vdata.groupKey, null, vdata.searchData)
  }

  function delFunc (recordId) { // 业务通用【删除】 函数
    $infoBox.confirmDanger('确认删除？', '', () => {
      $batchDelAdvert(recordId).then((res: any) => {
        $infoBox.message.success('删除成功！')

        if (vdata.groupKey == 'faceAdvert') { // 刷脸设备广告
          infoTableFace.value.refTable(false)
        }else if(vdata.groupKey == 'afterAdvert') {  // 支付成功后广告
          infoTableAfter.value.refTable(false)
        }else if(vdata.groupKey == 'appMchAdvert') { // 商户通广告
          infoTableAppMch.value.refTable(false)
        }else if(vdata.groupKey == 'appAgentAdvert') { // 展业宝广告
          infoTableAppAgent.value.refTable(false)
        }else if(vdata.groupKey == 'mchAdvert') { // 商户登录页广告
          infoTableMch.value.refTable(false)
        }else if(vdata.groupKey == 'agentAdvert') { // 代理商登录页广告
          infoTableAgent.value.refTable(false)
        }
      }).catch(err => {})
    })
  }
  function editFunc (advertType, recordId) { // 业务通用【修改】 函数
    infoAddOrEdit.value.show(vdata.groupKey, recordId)
  }

  function selectTabs (key) { // 清空必填提示
    if (key) {
      vdata.selectRecordIdList = []
      vdata.groupKey = key
      nextTick(() => {
        vdata.searchData = {}
        if(vdata.groupKey == 'appMchAdvert' || vdata.groupKey == 'appAgentAdvert') {
          vdata.paramsAndRateTabVal = 'home'
          vdata.searchData.appPlace = 2
        }
        searchFunc()
      })
    }
  }

  // 表格多选
  function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
    vdata.selectRecordIdList = selectedRowKeys
  }

  function deleteBatchFunc() {  // 批量删除
    console.log(vdata.selectRecordIdList)
    if (!vdata.selectRecordIdList || vdata.selectRecordIdList.length < 1) {
      $infoBox.message.error('请选择广告配置')
    } else {
      $infoBox.confirmDanger('确认删除？', '', () => {
        $batchDelAdvert(vdata.selectRecordIdList.join(',')).then((res: any) => {
          searchFunc()
          $infoBox.message.success('删除成功')
        })
      })
    }
  }

  function updateState (recordId, state) { // 【更新状态】
    return new Promise<void>((resolve, reject) => {
      return reqLoad.updateById(API_URL_ADVERT, recordId, { state: state }).then(res => {
        searchFunc()
        resolve()
      }).catch(err => reject(err))
    })
  }

  function changeAppAdvertType(appPlace, changeType) {
    vdata.selectRecordIdList = []
    vdata.isShowTable = false
    nextTick(() => {
      vdata.isShowTable = true
      nextTick(() => {
        // 选中类型
        vdata.paramsAndRateTabVal = changeType
        // 搜索类型
        vdata.searchData.appPlace = appPlace
        searchFunc()
      })
    })
  }

</script>
<style lang="less" scoped>
.flex {
  display:flex;
  margin-bottom: 8px;
  i {
    margin-left: 5px;
  }
}
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }

.tab-selected {
  background-color: var(--ant-primary-color);
  color: #fff;
}

.tab-content {

  // margin-top: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  margin-right: 20px;
  margin-bottom: 10px;
  overflow: hidden;

  border: 1px solid #d9d9d9;
  font-size: 14px;
  color: #808080;
  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    height: 32px;
    cursor: pointer;
  }
}

.but-wrapper{
  display: flex;
  align-items: center;
}

</style>